Cascade - Personal vCard Template

- About
- CSS Styles
- HTML Structure
- Javascript Files
- Plugins
- PSD Files
- Fonts used
- Credits
- Support

# About

Cascade is a minimalist personal vCard template based on four vertical menu tabs. The first tab is a typical descriptive about page with slider, the second is a gallery with build-in lightbox, next tab is a personal info page and the last tab is the contact page with working form. Included PSD source file allows you to customize this template to your needs.

- jQuery Powered
- Build-in Lightbox
- Working Contact Form
- Latest Tweets
- Font Face Fonts
- Valid XHTML Code
- PSD Source Included
- Documentation Included

# CSS Styles

The project uses the following cascade of template styles (in order):

- nivo-slider.css - default styles for slider,
- jquery.qtip.css - default styles for tooltips (overwritten in base.css),
- jquery.captify.css - default styles for label of images (overwritten in base.css),
- jquery.jScrollPane.css - default styles for scrollbars (overwritten in base.css),
- fancybox/jquery.fancybox.css - default styles for fancybox,
- base.css - base styles for whole project,
- page.css - styles for pages (blue,green,yellow,orange).

All CSS files are located in /style directory.

# HTML Structure

HTML page of this project is divided by three section: header, content and footer.

#### Header

    <!-- Header -->
    <div class="header main box-center">

    	<div class="layout-50 clear-fix overflow-fix">

    		<div class="layout-50-left">
    			<!-- Person name -->
    		</div>

    		<div class="layout-50-right">
    			<!-- Contact -->
    		</div>

    	</div>

    </div>
    <!-- /Header -->

#### Content

    <!-- Content -->
    <div class="content main box-center">

    	<!-- Cascade -->
    	<div class="cascade">

    		<!-- Box menu -->
    		<ul class="cascade-menu overflow-fix">
    			<li class="blue" id="blue.html">
    				<h3>Features</h3>
    				<span>Product Features</span>
    			</li>
    			<li class="green" id="green.html">
    				<h3>Gallery</h3>
    				<span>Product Highlights</span>
    			</li>
    			<li class="yellow" id="yellow.html">
    				<h3>Pricing</h3>
    				<span>Pricing Plans</span>
    			</li>
    			<li class="orange" id="orange.php">
    				<h3>Contact</h3>
    				<span>Drop Us a Line</span>
    			</li>
    		</ul>
    		<!-- /Box menu -->

    		<!-- Window -->
    		<div class="cascade-window">

    			<!-- Close bar -->
    			<div class="cascade-window-close-bar">
    				<a href="#"></a>
    			</div>
    			<!-- /Close bar -->

    			<!-- Page content -->
    			<div class="cascade-window-content"></div>
    			<!-- /Page content -->

    			<!-- Footer -->
    			<div class="cascade-window-footer"></div>
    			<!-- /Footer -->

    		</div>
    		<!-- /Window -->

    		<!-- Navigation -->
    		<a href="#" class="cascade-navigation cascade-navigation-prev"></a>
    		<a href="#" class="cascade-navigation cascade-navigation-next"></a>
    		<!-- /Navigation -->

    	</div>
    	<!-- /Cascade -->

    </div>
    <!-- /Content -->

When the cascade is opened, plugin (jquery.cascadeLanding.js) loads the page specified by the clicked item identifier. For example if you clicked yellow box, the page yellow.html is loaded. All subpages are stored in /page directory. After the page is loaded the script page.js is running. It contains instructions which are needed to fired plugins.

#### Footer

    <!-- Footer -->
    <div class="footer">

    	<hr class="footer-line" />

    	<div class="main box-center layout-7030 clear-fix overflow-fix">

    		<div class="layout-7030-left latest-tweets">
    			<!-- Latest tweets -->
    		</div>

    		<div class="layout-7030-right">
    			<!-- Social icons -->
    		</div>

    	</div>

    </div>
    <!-- /Footer -->

# Javascript Files

#### Plugins and library

- jQuery v1.6.4 (minified) - jQuery JavaScript Library, http://jquery.com/,
- JavaScript Linkify v0.3 - http://benalman.com/projects/javascript-linkify/,
- jQuery Easing v1.3 - http://gsgd.co.uk/sandbox/jquery/easing/,
- jQuery Captify v1.1.3 - http://thirdroute.com/projects/captify/,
- jQuery blockUI v2.39 - http://malsup.com/jquery/block/,
- jQuery bxSlider v3.0 - http://bxslider.com/,
- qTip2 (minified) - Pretty powerful tooltips, http://craigsworks.com/projects/qtip2/,
- jQuery FancyBox v1.3.4 - Simple and fancy lightbox alternative, http://fancybox.net/,
- jQuery MouseWheel v3.0.5 - http://brandonaaron.net/code/mousewheel/demos,
- jScrollPane v2.0.0 (minified) - http://jscrollpane.kelvinluck.com/,
- jQuery Nivo Slider v2.6 - http://nivo.dev7studios.com/.

#### Other files

- script.js - script contains a few simple functions used in this project,
- main.js - script contains a call jquery plugins which are used in main page,
- page.js - script contains a call jquery plugins which are used in pages,
- jquery.cascadeLanding.js - script contains plugins used to handle animations.

# Plugins

#### Contact form

This project includes a contact form ready for use.
All you need is to configure some constants located in file plugin/contact-form/config.php:

- _from_name - name of your e-mail eg. "My Company",
- _from_email - sender e-mail eg. "mycompany@gmail.com",
- _to_name - name of recipient eg. "My Company",
- _to_email - e-mail of recipent eg. "mycompany@gmail.com",
- _host - your SMTP host eg. "gmail.com",
- _username - login to your e-mail account eg. "mycompany",
- _password - password to your e-mail account.

# PSD Files

Template contains layered and organized PSD source file - cascade.psd with predefined slices.

# Fonts used

- Open Sans By Steve Matteson, Apache License, version 2.0
  http://www.google.com/webfonts/specimen/Open+Sans,
- Arial - default system font.

# Credits

#### Icons

All icons by QuanticaLabs. Icons are an integral part of this template, please do not use it separately for other purposes.

#### Images

All images under Creative Commons (Attribution 2.0 Generic / Attribution-ShareAlike 2.0 Generic) for commercial use.

- Sample Image: Rhiannon By apdk
  http://www.flickr.com/photos/62337512@N00/3399346389/in/photostream/,
- Sample Image: Rhiannon By apdk
  http://www.flickr.com/photos/62337512@N00/3400158730/in/photostream/,
- Sample Image: Rhiannon By apdk
  http://www.flickr.com/photos/62337512@N00/3399355423/sizes/m/in/photostream/.

# Support

If you have any questions, please use our profile contact form on Envato (http://themeforest.net/user/QuanticaLabs).
We aim to answer all questions within 24 hours. In some cases the waiting time can be extended to 48 hours.